<template>
    <div >
          <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/admin/home' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>商家中心</el-breadcrumb-item>
          <el-breadcrumb-item>商家简介</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="50">
            <el-col :span="8" >
                <el-row>
                    <el-card class="header-card" shadow="hover">
                        <span style="fontSize:20px">关于商铺</span>
                    </el-card>
                </el-row>
                <el-row>
                    <el-card class="head-card" >
                    <div class="upload">
                      <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="image">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>

 
                    <div style="padding: 14px;">
                    <span style="text-align: center;display:block;fontSize:25px">{{this.shopName}}</span>
                    <span style="text-align: center;display:block;fontSize:15px">{{this.shopAddr}}</span>
                    <i class="el-icon-s-shop"><span style="fontSize:15px">商铺信息</span></i>
                    <div class="line" />
                    <div class="bottom clearfix">
                      <p class="serif">{{editForm.shop_intr}}</p>
                    </div>
                    <time class="time">{{ currentDate }}</time>
                    </div>
                    </el-card>
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card" shadow="hover">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="店铺信息" name="first">
                        <el-card class="shopCard">
                          <div style="margin-left:150px">
                            <el-row :gutter="50">
                              <el-col :span="6">
                                <div>
                                  <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
                                </div>
                              </el-col>
                                  <el-col :span="6">
                                <div>
                                </div>
                              </el-col>
                              <el-col :span="6">
                                <div>
                                  <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title2">
                                    <template slot="prefix">
                                      <i class="el-icon-s-flag" style="color: red"></i>
                                    </template>
                                    <template slot="suffix">
                                      <i class="el-icon-s-flag" style="color: blue"></i>
                                    </template>
                                  </el-statistic>
                                </div>
                          
                          </el-col>
                          <el-col :span="6">
                            <div>
                              <el-statistic :value="like ? 201 : 200" title="反馈">
                                <template slot="suffix">
                                  <span @click="like = !like" class="like">
                                    <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                                    <i class="el-icon-star-off"  v-show="!like"></i>
                                  </span> </template>
                              </el-statistic>
                            </div>
                          </el-col>
                          </el-row>
                          </div>
                      <div slot="header" class="clearfix">
                        <span>店铺信息</span>
                        <el-button style="float: right; padding: 5px 10px" type="primary" @click="editShop">编辑</el-button>
                      </div>
                      <p class="serif-head"> 店铺评分</p>
                      <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                      style="display: inline-block;">
                      </el-rate>
                      <p class="serif-head"> 店铺分类</p>
                      <p class="serif"> 小吃快餐</p>
                      <p class="serif-head"> 营业时间</p>
                      <p class="serif"> 8:00 - 24:00</p>
                        </el-card>

                    </el-tab-pane>
                    <el-tab-pane label="账户信息" name="second">
                      <el-card class="shopCard">
                        <div slot="header" class="clearfix">
                          <span>账户信息</span>
                          <el-button style="float: right; padding: 5px 10px" type="primary" @click="(countVisible=true)">编辑</el-button>
                        </div>

                        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
                          <el-descriptions-item>
                            <template slot="label">
                              <i class="el-icon-user"></i>
                              用户名
                            </template>
                            <p class="serif"> {{this.shopName}}</p>
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label">
                              <i class="el-icon-mobile-phone"></i>
                              手机号
                            </template>
                            <p class="serif"> {{this.shopPhone}}</p>
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label">
                              <i class="el-icon-location-outline"></i>
                              地址
                            </template>
                            <p class="serif"> {{this.shopAddr}}</p>
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label">
                              <i class="el-icon-tickets"></i>
                              备注
                            </template>
                            <el-tag size="small">{{countForm.tip}}</el-tag>
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template slot="label">
                              <i class="el-icon-office-building"></i>
                              详细地址
                            </template>
                            <p class="serif"> {{countForm.allLoc}}</p>
                          </el-descriptions-item>
                        </el-descriptions>
                      </el-card>

                    </el-tab-pane>
                  </el-tabs>
                  </el-card>
            </el-col>
        </el-row>
        <el-dialog
          title="修改店铺信息"
          :visible.sync="editDialogVisible"
          width="50%"
          @close="editDialogClosed"
        >
      <!-- 内容主题区域 -->
      <el-form label-position="left"
        :model="editForm"
        label-width="90px"
      >
        <el-form-item label="店铺名称" prop="shop_name">
          <el-input v-model="shopName" ></el-input>
        </el-form-item>
        <el-form-item label="店铺位置" prop="shop_pos">
          <el-input v-model="shopAddr" ></el-input>
        </el-form-item>
        <el-form-item label="店铺简介" prop="shop_pos">
          <el-input v-model="editForm.shop_intr" ></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="(editDialogVisible = false)"> 确 定 </el-button>
        </span>
    </el-dialog>
      <el-dialog
          title="修改账户信息"
          :visible.sync="countVisible"
          width="50%"
          @close="countClosed"
        >
      <!-- 内容主题区域 -->
      <el-form label-position="left"
        :model="countForm"
        label-width="90px"
      >
        <el-form-item label="用户名" prop="admin">
          <el-input v-model="countForm.admin" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="countForm.phone" ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="location">
          <el-input v-model="countForm.location" ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="tip">
          <el-input v-model="countForm.tip" ></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="allLoc">
          <el-input v-model="countForm.allLoc" ></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="countVisible = false">取 消</el-button>
          <el-button type="primary" @click="(countVisible = false)"> 确 定 </el-button>
        </span>
      </el-dialog>
    </div>

</template>
  
  <script>

import Vue from 'vue';
import { Table } from 'element-ui';
Vue.use(Table);
import axios from 'axios';
export default {
  data() {
    return {
      shopName:'',
      shopAddr:'',
      shopPhone:'',
      countVisible :false,
      size:'',
      dialogVisible: false,
      like: true,
      value1: 15000,
      value2: 2000000,
      title: "总销售额",
      title2: "新增销售额",
      value:4.5,
      editForm: {
        shop_name: 'KFC',
        shop_pos: '海淀区花园路',
        shop_intr:'全国连锁，提供最便捷的快餐式服务'
      },
      countForm:{
        admin:'admin123',
        phone:'18000000000',
        location:'北京市总部',
        tip:'全国连锁',
        allLoc:'北京市海淀区花园路'
      },
      editDialogVisible:false,
      currentDate: new Date(),
      activeName: "first",
      imageUrl: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    }
  },
  created() {
    this.getShopList()
  },
  methods: {
    //获取店铺信息
    async getShopList() {
      // var query = {id : "1"}
      // console.log(query)
      // axios.post(`http://127.0.0.1:4523/m1/1473865-0-default/getshop`,{
      //   params: query,
      //   })
      //   .then((res) => { 
      //     this.editForm = res.data;
      //     console.log("post data")
      //     console.log(this.editForm)
      //   })
      axios.post(`/business/info`,{})
      .then((res)=>{
        if(res.status !== 200) this.$message.error("获得商家信息失败")
        this.shopName = res.data.name
        this.shopAddr = res.data.addr
        this.shopPhone = res.data.phone
      })
    },
    beforeAvatarUpload(file) {
				console.log(file)
                // 使图片显示
				this.imageUrl = URL.createObjectURL(file);
				return false
			},
    editShop(){
      //如果要获得当前店铺信息就把注释去掉
      // this.getShopList()
      this.editDialogVisible=true
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    countClosed() {
      this.$refs.countFormRef.resetFields()
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    // editCollege() {
    //   this.$refs.editFormRef.validate(async (valid) => {
    //     // console.log(valid)
    //     if (!valid) return
    //     // 校验正确则发起请求
    //     const { data: res } = await this.$http.put(
    //       'admin/college/edit/' + this.editForm.college_id,
    //       {
    //         shop_name: this.editForm.shop_name,
    //       }
    //     )
    //     if (res.status !== 200)
    //       this.$message.error('修改失败！\n' + res.detail[0])
    //     this.$message.success('更新成功！')
    //     this.editDialogVisible = false
    //     // 重新获取院系列表
    //     this.getShopList()
    //   })
    //   this.editForm
    // },
  }
}
  </script>
    <style >
    .disabled .el-upload--picture-card {
      display: none !important;
    }
    p.serif{
      font-family:"微软雅黑";
      font-size:15px;
    }
    p.serif-head{
      font-family:"微软雅黑";
      font-size:15px;
      font-weight: bold;
    }
    .shopCard{
      width: 770px;
      height: 400px;
    }
    .line{
      float:right;
      width: 100%;
      height: 1px;
      background:#d6d6d6;
      position: relative;
      text-align: center;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .main{
      margin: 10px;
    }
    .text {
      font-size: 25px;
    }
  
    .item {
      margin-bottom: 18px;
    }
    .head-card {
      width: 400px;
      height: 500px;
    }
    .header-card{
      width: 400px;
      height: 60px;
      margin-bottom: 3px;
      padding-bottom: 2px;
    }
  
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
  
    .box-card {
      width: 820px;
      height: 500px;
    }
      .time {
        font-size: 13px;
        color: #999;
        float: bottom;
      }
      
      .bottom {
        margin-top: 5px;
        line-height: 12px;
      }
    
      .button {
        padding: 0;
        float: right;
      }
    
      .image {
        width: 170px;
        height: 170px;
        display: inline;
        border-radius:50%;
        margin-left: 100px;
      }
    
      .clearfix:before,
      .clearfix:after {
          display: table;
          content: "";
      }
      
      .clearfix:after {
          clear: both
      }
      .like {
        cursor: pointer;
        font-size: 25px;
        display: inline-block;
      }
      .upload{
        width: 400px;
        height: 200px;
      }
      .avatar-uploader 
      .el-upload{
        border:none
      }

    </style>